<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Connection Example for Open-jACOB Draw2D</title>
        <!-- common, all times required, imports -->
        <!--REGEXP_START_REMOVE-->
	<SCRIPT src="../wz_jsgraphics.js"></SCRIPT>
	<SCRIPT src="../events.js"></SCRIPT>
	<SCRIPT src="../debug.js"></SCRIPT>
	<SCRIPT src="../dragdrop.js"></SCRIPT>
	<SCRIPT src="../PositionConstants.js"></SCRIPT>
	<SCRIPT src="../Graphics.js"></SCRIPT>
	<SCRIPT src="../Color.js"></SCRIPT>
	<SCRIPT src="../ArrayList.js"></SCRIPT>
	<SCRIPT src="../Point.js"></SCRIPT>
	<SCRIPT src="../Dimension.js"></SCRIPT>
	<SCRIPT src="../Border.js"></SCRIPT>
	<SCRIPT src="../LineBorder.js"></SCRIPT>
	<SCRIPT src="../Figure.js"></SCRIPT>
	<SCRIPT src="../Node.js"></SCRIPT>
        <SCRIPT src="../VectorFigure.js"></SCRIPT>
	<SCRIPT src="../Label.js"></SCRIPT>
	<SCRIPT src="../Oval.js"></SCRIPT>
	<SCRIPT src="../Circle.js"></SCRIPT>
	<SCRIPT src="../Rectangle.js"></SCRIPT>
	<SCRIPT src="../ImageFigure.js"></SCRIPT>
	<SCRIPT src="../Port.js"></SCRIPT>
	<SCRIPT src="../InputPort.js"></SCRIPT>
	<SCRIPT src="../OutputPort.js"></SCRIPT>
	<SCRIPT src="../Line.js"></SCRIPT>
	<SCRIPT src="../ConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../NullConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../ManhattanConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../BezierConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../FanConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../Connection.js"></SCRIPT>
	<SCRIPT src="../ConnectionAnchor.js"></SCRIPT>
	<SCRIPT src="../ChopboxConnectionAnchor.js"></SCRIPT>
	<SCRIPT src="../CompartmentFigure.js"></SCRIPT>
	<SCRIPT src="../ConnectionDecorator.js"></SCRIPT>
	<SCRIPT src="../ArrowConnectionDecorator.js"></SCRIPT>
	<SCRIPT src="../Document.js"></SCRIPT>
	<SCRIPT src="../Annotation.js"></SCRIPT>
	<SCRIPT src="../ResizeHandle.js"></SCRIPT>
	<SCRIPT src="../LineStartResizeHandle.js"></SCRIPT>
	<SCRIPT src="../LineEndResizeHandle.js"></SCRIPT>
	<SCRIPT src="../Canvas.js"></SCRIPT>
	<SCRIPT src="../Workflow.js"></SCRIPT>
	<SCRIPT src="../Window.js"></SCRIPT>
	<SCRIPT src="../Button.js"></SCRIPT>
	<SCRIPT src="../ToggleButton.js"></SCRIPT>
	<SCRIPT src="../SnapToHelper.js"></SCRIPT>
	<SCRIPT src="../SnapToGeometry.js"></SCRIPT>
	<SCRIPT src="../SnapToGeometryEntry.js"></SCRIPT>
	<SCRIPT src="../SnapToGrid.js"></SCRIPT>
	<SCRIPT src="../ToggleButton.js"></SCRIPT>
	<SCRIPT src="../ToolGeneric.js"></SCRIPT>
	<SCRIPT src="../ToolPalette.js"></SCRIPT>
	<SCRIPT src="../Dialog.js"></SCRIPT>
	<SCRIPT src="../InputDialog.js"></SCRIPT>
	<SCRIPT src="../PropertyDialog.js"></SCRIPT>
	<SCRIPT src="../AnnotationDialog.js"></SCRIPT>
	<SCRIPT src="../PropertyWindow.js"></SCRIPT>
	<SCRIPT src="../ColorDialog.js"></SCRIPT>
	<SCRIPT src="../LineColorDialog.js"></SCRIPT>
	<SCRIPT src="../BackgroundColorDialog.js"></SCRIPT>
	<SCRIPT src="../AnnotationDialog.js"></SCRIPT>
        <!-- undo/redo support (all times required too) -->
	<SCRIPT src="../Command.js"></SCRIPT>
	<SCRIPT src="../CommandStack.js"></SCRIPT>
	<SCRIPT src="../CommandStackEvent.js"></SCRIPT>
	<SCRIPT src="../CommandStackEventListener.js"></SCRIPT>
	<SCRIPT src="../CommandAdd.js"></SCRIPT>
	<SCRIPT src="../CommandDelete.js"></SCRIPT>
	<SCRIPT src="../CommandMove.js"></SCRIPT>
	<SCRIPT src="../CommandMoveLine.js"></SCRIPT>
	<SCRIPT src="../CommandResize.js"></SCRIPT>
	<SCRIPT src="../CommandSetText.js"></SCRIPT>
	<SCRIPT src="../CommandSetColor.js"></SCRIPT>
	<SCRIPT src="../CommandSetBackgroundColor.js"></SCRIPT>
	<SCRIPT src="../CommandConnect.js"></SCRIPT>
	<SCRIPT src="../CommandReconnect.js"></SCRIPT>
	<SCRIPT src="../Menu.js"></SCRIPT>
	<SCRIPT src="../MenuItem.js"></SCRIPT>
        <!--REGEXP_END_REMOVE-->

        <!-- example specific imports -->
	<SCRIPT src="Start.js"></SCRIPT>
	<SCRIPT src="End.js"></SCRIPT>
	<SCRIPT src="DecoratedConnection.js"></SCRIPT>
	<SCRIPT src="MyInputPort.js"></SCRIPT>
	<SCRIPT src="MyOutputPort.js"></SCRIPT>
	<SCRIPT src="BranchConnectionDecorator.js"></SCRIPT>
	<SCRIPT src="CrossConnectionDecorator.js"></SCRIPT>
	<SCRIPT src="PolygonConnectionDecorator.js"></SCRIPT>
</head>
<body onselectstart="return false;" style="margin:0px;padding:0px;" onkeydown="">
<div id="paintarea" style="position:absolute;left:0px;top:0px;width:3000px;height:3000px" >
    <!-- The information help text -->
    <div style="background-color:white;border:1px solid gray;width:350px;padding:10px;font-size:8pt;">
    <center><b>Draw2D 0.9.14 - A simple diagram drawing demo<br>
    by Andreas Herz (a.herz @ freegroup.de)
    <br>
    </b>
    <br>
    <div style="color:red;font-size:9pt">Focus of this example: Test the new method <b>Port.setHideIfConnected(/*:boolean*/ flag)</b>.</div>
    </center>
    <br>
    <center>See more on <a href="http://www.draw2d.org">Open-jACOB Draw2D</a></center>
    </div>

</div>
<script>
  // Create an interactive Canvas
  //
  var workflow  = new draw2d.Workflow("paintarea");

  // Add the start,end,connector to the canvas
  //
  var startObj = new draw2d.Start();
  workflow.addFigure(startObj, 450,200);
  var endObj   = new draw2d.End();
  workflow.addFigure(endObj,600,250);


  // Add the start,end,connector to the canvas
  //
  startObj = new draw2d.Start();
  workflow.addFigure(startObj, 450,290);
  endObj   = new draw2d.End();
  workflow.addFigure(endObj,600,320);
  // Create a Connection
  var c = new draw2d.Connection();
  c.setRouter(new draw2d.BezierConnectionRouter());
  c.setSource(startObj.getPort("output"));
  c.setTarget(endObj.getPort("input"));
  c.setTargetDecorator(new draw2d.ArrowConnectionDecorator());
  workflow.addFigure(c);




  // Add the start,end,connector to the canvas
  //
  var startObj = new draw2d.Start();
  workflow.addFigure(startObj, 450,400);
  var endObj   = new draw2d.End();
  workflow.addFigure(endObj,600,450);
  var c = new draw2d.Connection();
  c.setRouter(new draw2d.ManhattanConnectionRouter());
  c.setSource(startObj.getPort("output"));
  c.setTarget(endObj.getPort("input"));
  c.setTargetDecorator(new draw2d.BranchConnectionDecorator());
  c.setSourceDecorator(new draw2d.CrossConnectionDecorator());
  workflow.addFigure(c);

  // Add the start,end,connector to the canvas
  //
  var startObj = new draw2d.Start();
  workflow.addFigure(startObj, 450,550);
  var endObj   = new draw2d.End();
  workflow.addFigure(endObj,600,600);
  var c = new draw2d.Connection();
  c.setRouter(new draw2d.NullConnectionRouter());
  c.setSource(startObj.getPort("output"));
  c.setTarget(endObj.getPort("input"));
  c.setTargetDecorator(new draw2d.PolygonConnectionDecorator());
  c.setSourceDecorator(new draw2d.CrossConnectionDecorator());
  workflow.addFigure(c);

</script>
</body>
</html>
